/*
 * Author： Lee
 * Create Time: 2018-02-02
 * Description:
 * CopyRight:
 **/
import React, {Component} from 'react';
import './index.css';

export default class LeftTWayPipe extends Component {
  constructor(props) {
    super(props);
    console.log('LeftTWayPipe props,', this.props);
    /*
     * * props 参数说明
     * x：相对位置x坐标
     * y: 相对位置y坐标
     * width： 宽度
     * height：高度
     * color: 水流颜色
     * 管道的默认颜色 #949494
     * 水流的默认颜色 #1830fb
     * state状态表示，开关是否打开
     * */
    this.state = {
      fill: this.props.fill ? this.props.fill : false,
    };
  }

  render() {
    return (
      <svg className="LeftTWayBox" label={this.props.label ? this.props.label : 'LeftTWay'} x={ this.props.x ? this.props.x : '100'} y={ this.props.y ? this.props.y : '500'} width={ this.props.width ? this.props.width : '100'} height={this.props.height ? this.props.height : '100'}>
        <svg className="LeftTWayContent" viewBox="0 0 100 100">
          <rect x="30%" y='0%' width="40%" height="100%" fill="#949494">
          </rect>
          <path d="M0,30 L30,30 L50,50 L30,70 L0,70 Z" fill="#949494">
          </path>
          <g style={{ display: this.state.fill ? 'block' : 'none'}}>
            <rect x="40%" y="0%" width="20%" height="100%" fill={ this.props.color ? this.props.color : "#1830fb"}>
            </rect>
            <path d="M0,40 L40,40 L50,50 L40,60 L0,60 Z" fill={ this.props.color ? this.props.color : "#1830fb"}>
            </path>
          </g>
        </svg>
      </svg>
    )
  }
}
